<template>
    <div class="module-card">
        <div class="module-header">
            <h2 class="module-title">收入统计</h2>
            <div class="flex space-x-1">
                <button class="px-2 py-1 text-xs bg-primary text-white rounded"
                    @click="setRevenuePeriod('month')"
                    :class="{ 'bg-primary text-white': revenuePeriod === 'month' }">月</button>
                <button class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded"
                    @click="setRevenuePeriod('quarter')"
                    :class="{ 'bg-primary text-white': revenuePeriod === 'quarter' }">季</button>
                <button class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded"
                    @click="setRevenuePeriod('year')"
                    :class="{ 'bg-primary text-white': revenuePeriod === 'year' }">年</button>
            </div>
        </div>
        <div class="p-4">
            <div class="h-64" ref="revenueChart"></div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

export default {
    name: 'RevenueStatistics',
    setup() {
        const revenueChart = ref(null);
        const revenuePeriod = ref('month');
        let chartInstance = null;

        // 收入数据
        const getRevenueData = () => {
            if (revenuePeriod.value === 'month') {
                return {
                    labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
                    values: [12500, 19200, 15800, 22000, 18700, 24500, 21000]
                };
            } else if (revenuePeriod.value === 'quarter') {
                return {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    values: [450000, 520000, 680000, 590000, 720000, 850000]
                };
            } else {
                return {
                    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
                    values: [180, 250, 220, 320]
                };
            }
        };

        // 初始化图表
        const initChart = () => {
            // 销毁已有实例
            if (chartInstance) {
                chartInstance.dispose();
            }
            
            // 创建新实例
            chartInstance = echarts.init(revenueChart.value);
            const data = getRevenueData();
            
            // 配置项
            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: `${revenuePeriod.value === 'year' ? '{b}: {c} 万元' : '{b}: {c} 元'}`
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.labels,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    beginAtZero: true,
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    }
                },
                series: [{
                    name: '收入',
                    type: 'line',
                    data: data.values,
                    lineStyle: {
                        color: '#165DFF'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(22, 93, 255, 0.3)' },
                            { offset: 1, color: 'rgba(22, 93, 255, 0)' }
                        ])
                    },
                    smooth: true,
                    symbol: 'none'
                }]
            };
            
            chartInstance.setOption(option);
        };

        // 设置统计周期
        const setRevenuePeriod = (period) => {
            revenuePeriod.value = period;
        };

        // 窗口大小变化时重绘
        const handleResize = () => {
            chartInstance?.resize();
        };

        onMounted(() => {
            initChart();
            window.addEventListener('resize', handleResize);
        });

        onBeforeUnmount(() => {
            window.removeEventListener('resize', handleResize);
            if (chartInstance) {
                chartInstance.dispose();
            }
        });

        watch(revenuePeriod, initChart);

        return {
            revenueChart,
            revenuePeriod,
            setRevenuePeriod
        };
    }
}
</script>